<template>
  <MainContentSearchBarWrapper>
    <SearchBar inline>
      <template #normal>
        <el-form-item label="客群名称">
          <el-input v-model="tableForm.name" clearable placeholder="请输入客群名称">
          </el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="tableForm.type" placeholder="请选择类型" clearable>
            <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in typeList" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
        <!--        <ins-cascader-filter-->
        <!--          @change="(insIds) => (tableForm.insIds = insIds)"-->
        <!--        ></ins-cascader-filter>-->
      </template>
      <template #toolbar>
        <el-form-item>
          <el-dropdown style="margin-right: 10px">
            <el-button type="primary" v-has="['120108', '120109']"> 新建客群 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="addGroup = true" v-has="['120108']">静态客群</el-dropdown-item>
                <el-dropdown-item @click="
                  $router.push('/merchant/customerCenter/customerGroup/addSmartGroup')
                  " v-has="['120109']">智能客群</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="primary" @click="toSetGroup" v-has="['120106']">批量修改分组</el-button>
          <!-- TODO 加权限 -->
          <el-button type="primary"  @click="showExportData = true">导出</el-button>
        </el-form-item>
      </template>
    </SearchBar>
    <div v-if="selectionList.length" class="">已选 {{ selectionList.length }} 条</div>
    <LayoutTable ref="customerGroupRef" url="/user/userGroup/userGroupList" :rowKey="(row) => {
      return String(row.id);
    }
      " :param="tableForm" @selection-change="selectionChange">
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="name" label="客群名称" min-width="120"></el-table-column>
      <!-- <el-table-column prop="insName" label="机构名称" min-width="100"></el-table-column> -->
      <el-table-column prop="humanNum" label="人数" min-width="100"> </el-table-column>
      <el-table-column prop="type" label="类型" min-width="100">
        <template #default="scope">
          <div>
            {{ scope.row.type == 0 ? "静态" : "智能" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="生效状态" min-width="100">
        <template #default="scope">
          <div>
            {{ scope.row.syncStatus == 0 ? "未生效" : "已生效" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="客群用途" min-width="120"></el-table-column>
      <el-table-column prop="symbol" label="客群标识" min-width="120"></el-table-column>
      <el-table-column prop="createUserName" label="创建人" min-width="100">
      </el-table-column>
      <!-- <el-table-column prop="updateTime" label="更新时间" min-width="160">
        <template #default="scope">
          <div>
            {{ $filters.dateFormat(scope.row.updateTime) }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="250" fixed="right" align="center"
        v-has="['120104', '120102', '120103', '120105']">
        <template #default="scope">
          <el-button link type="primary" v-has="['120104']" @click="
            $router.push(
              `/merchant/customerCenter/customerGroup/customerDetail/${scope.row.id}?type=${scope.row.type}`
            )
            ">
            客群明细
          </el-button>
          <el-button link type="primary" @click="toEditor(scope.row)" v-has="['120102']">
            编辑
          </el-button>
          <el-button @click="del(scope.row)" link type="primary" v-has="['120103']">删除</el-button>
          <el-button v-if="scope.row.type == 1 && !scope.row.syncStatus" @click="setState(scope.row)" link type="primary"
            v-has="['120105']">立即生效</el-button>
        </template>
      </el-table-column>
    </LayoutTable>
    <add-group @closeGroup="closeGroup" :isDialog="addGroup" :groupData="groupData"></add-group>
    <setGroup :showDialog="setGroup" :selectionList="selectionList" @confirm="confirm" @cancel="cancel"></setGroup>
    <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="客群列表"
      export-type="userGroupInfoExport">
    </exportData>
  </MainContentSearchBarWrapper>
</template>
<script>
import CustomerApi from "@/api/customerApi";
import addGroup from "./component/addGroup.vue";
import setGroup from "./component/setGroup.vue";
import exportData from "@/components/exportData/exportData.vue";

import { ElMessage, ElMessageBox } from "element-plus";

// import { nowDateFormatter } from '@/filters/index'
export default {
  components: { addGroup, setGroup, exportData },
  name: "CustomerGroupList",
  props: {
    categoryId: {
      type: [Number, String],
      default: () => {
        return "";
      },
    },
  },
  watch: {
    categoryId: {
      immediate: true,
      handler(val) {
        this.tableForm.categoryId = val;
      },
    },
  },
  data() {
    return {
      addGroup: false,
      setGroup: false,
      showExportData: false,
      groupData: { id: null },
      selectionList: [],
      // orgList: [],
      formData: {},
      tableForm: {
        name: "",
        insIds: [],
        type: "",
        categoryId: this.categoryId,
      },
      typeList: [
        { id: null, name: "全部" },
        { id: 0, name: "静态" },
        { id: 1, name: "智能" },
      ],
    };
  },

  methods: {
    toSetGroup() {
      if (!this.selectionList.length) {
        ElMessage.warning("请先选择需要修改的客群");
        return;
      }
      this.setGroup = true;
    },
    // 删除客群
    async delUserGroup(row) {
      let rs = await CustomerApi.delUserGroup({ id: row.id, name: row.name });
      if (rs.code == 200) {
        ElMessage.success("删除客群成功");
        this.onSearch();
      }
    },
    del(row) {
      ElMessageBox.confirm("此操作将删除该客群, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delUserGroup(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toEditor(row) {
      if (row.type == 0) {
        this.addGroup = true;
        this.groupData = JSON.parse(JSON.stringify(row));
      } else {
        this.$router.push(
          `/merchant/customerCenter/customerGroup/addSmartGroup?id=${row.id}`
        );
      }
    },
    setState(row) {
      ElMessageBox.confirm("立即生效?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let rs = await CustomerApi.setSmartGroupState({ id: row.id, name: row.name });
        if (rs.code === 200) {
          ElMessage.success("智能客群已生效");
          this.onSearch();
        }
      });
    },
    copyGroup(row) {
      let params = {
        insId: row.insId,
        isCopy: true,
        name: row.name,
        symbol: row.symbol,
        type: row.type,
        remark: row.remark,
        userGroupPropertyIdList: row.userGroupPropertyIdList,
      };
      this.addGroup = true;
      this.groupData = params;
    },
    resetForm() {
      this.tableForm = {
        name: "",
      };
      this.onSearch();
    },
    closeGroup(val, close) {
      this.addGroup = val;
      this.groupData = { id: null };
      if (!close) {
        this.onSearch();
      }
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.customerGroupRef.search();
      });
    },
    selectionChange(val, row) {
      this.selectionList = val;
    },
    confirm(nodeId) {
      this.onSearch();
      console.log("[ this.$refs ]", this.$refs);
      this.$refs.customerGroupRef.$refs.elTable.clearSelection();
      this.selectionList = [];
      this.$emit("setNodeId", nodeId);
    },
    cancel() {
      this.setGroup = false;
    },
  },

  mounted() {
    // this.getOrgList();
  },
  activated(){
    this.onSearch();
  }
};
</script>

<style lang="scss" scoped></style>
